<template>
<view class="enterprise-head">
	<view class="fboxRow font26">
		<image class="logo" :src="detail.companyLogo" mode="aspectFill"></image>
		<view class="fboxCol flex1 info">
			<view class="fboxRow Ycenter font28">
				<view class="flex1 fboxRow Ycenter">
				<view class="name font30 lh44 font-ell1">{{detail && detail.companyName}}</view>
					<text v-if="detail && detail.authStatus == 1" class="ml12 bwfont bw-qiye color-linear"></text>
				</view>
				<view class="follow fboxRow Ycenter Xcenter bg-linear font24" @click="follow()">
					<text class="bwfont font24" :class="detail.isFollow ? 'bw-yiguanzhu' : 'bw-weiguanzhu'"></text>
					{{detail.isFollow ? '已关注' : '关注'}}
				</view>
			</view>
			<view class="font26 lh38" v-if="detail.industryName">{{detail && detail.industryName}}</view>
			<view class="font26 lh38 font-ell1" v-if="detail.companyAddress">{{detail && detail.companyAddress}}</view>
		</view>
	</view>
	<view class="btn-group mt40 fboxWrap">
		<view class="btn fboxRow Ycenter Xcenter border-radius12"  @click="isModal = true">
			<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/icon-qcmpx.png" mode="aspectFit"></image>
				请赐名片箱
		</view>
		<view class="btn fboxRow Ycenter Xcenter border-radius12" @click="callPhone">
			<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/card/icon-bddh.png" mode="aspectFit"></image>
				拨打电话
		</view>
	</view>
	<view class="tags fboxWrap mt32" v-if="detail.tagNameList && detail.tagNameList.length">
		<view class="tag fboxRow Ycenter Xcenter font26" v-for="(item, index) in detail.tagNameList" :class="['color-'+((index%5).toFixed(0))]" :key="index" @click="likeTap(item, index)">
			{{item}}
		</view>	
	</view>	
	<view class="modal-black">
		<u-popup :show="isModal" @close="isModal = false" mode="center">
			<view class="give-card">
				<image class="bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/modal-qcmp2.png" mode=""></image>
				<view class="tit fboxRow Ycenter Xcenter font28 font-ell1">{{detail.companyName}}竭诚期待与您联系</view>
				<view class="btn fboxRow Ycenter Xcenter" @click="giveCard"></view>
				<!-- <view class="btn fboxRow Ycenter Xcenter bg-linear font32 color-141720" @click="giveCard">递名片</view> -->
			</view>
			<view class="fboxRow Ycenter Xcenter" style="margin-top: 64rpx;">
				<u-icon @click="isModal = false" size="84rpx" name="close-circle" color="#fff"></u-icon>
				<!-- <u-icon @click="isModal = false" size="66rpx" name="close-circle" color="#E8CDA7"></u-icon> -->
			</view>
		</u-popup>
	</view>
</view>
</template>

<script>
	import { followCompanyRemove, followCompany,bestowCompany } from '@/api/card.js';
	export default {
		props:{
			detail:{
				type: Object,
				defaul:()=>{
					return {}
				}
			}
		},
		computed:{
			_detail:{
				get(){
					return this.detail
				},
				set(val){
					this.$emit('update:detail',val)
				}
			}
		},
		options: { styleIsolation: 'shared' },
		data() {
			return {
				isModal: false
			}
		},
		methods: {
			giveCard(){
				const {bw_params, bw_user_temp} = getApp().getBWData(['bw_params', 'bw_user_temp'])
				if (bw_params && bw_params.access_token) {
					// 判断用户是否点击了跳过接口，没有者调一下跳过接口，解决后台查询不到数据
					if(bw_user_temp.realName && bw_user_temp.avatar){
						this.postBestow()
					}else{
						completeInformation({}).then(res => {
							this.postBestow()
						});
					}
				} else {
					this.isModal = false
					this.$emit('login')
				}
			},
			// 请赐名片
			postBestow(){
				const {bw_params, bw_user_temp} = getApp().getBWData(['bw_params', 'bw_user_temp'])
				bestowCompany({
					"cardId": bw_user_temp.memberId,
					"companyId": this.detail.companyId,
					"remark": ""
				}).then(res=>{
					this.isModal = false
					if(res.data){
						uni.showToast({
							icon: 'none',
							title:'发送成功'
						})
					}
				})
			},
			// 关注企业
			follow(){
				const bw_params = getApp().getBWData(['bw_params']).bw_params
				if (bw_params && bw_params.access_token) {
					const api = this._detail.isFollow ? followCompanyRemove : followCompany
					api({
						companyId: this._detail.companyId
					}).then(res => {
						if (res.data) {
							this._detail.isFollow = !this._detail.isFollow;
						}
						uni.showToast({
							icon: 'none',
							title: res.data
						});
					});
				} else {
					this.$emit('login')
				}
			},
			// 拨打电话
			callPhone() {
				if(this._detail.companyPhone){
					uni.makePhoneCall({
						phoneNumber: this._detail.companyPhone
						//仅为示例
					});
				}else{
					uni.showToast({
						icon: 'none',
						title: '该公司没有设置电话'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.enterprise-head{padding: 40rpx;}
	.enterprise-head .logo{ margin-right: 24rpx; width: 100rpx;height: 100rpx;border-radius: 12rpx}
	.enterprise-head .info{color: var(--contentFontLightColor)}
	.enterprise-head .name{color: var(--titleFontColor)}
	.follow{border-radius: 8rpx;width: 128rpx;height: 52rpx;box-shadow: 0rpx 6rpx 12rpx 0rpx #FDF7F1;}
	.follow .bwfont{margin-right: 6rpx;}
	.enterprise-head .icon { margin-left: 9rpx; width: 40rpx; height: 40rpx }
	.enterprise-head .tag{ margin: 0 16rpx 16rpx 0;height: 48rpx;padding: 0 12rpx;border-radius: 8rpx;border:1rpx solid #eee}
	.enterprise-head .tag .bwfont{font-size: 26rpx;margin-right: 8rpx}
	.enterprise-head .color-0{color:#2F80ED; border-color: #2F80ED;}
	.enterprise-head .color-1{color:#F2994A; border-color: #F2994A;}
	.enterprise-head .color-2{color:#6FCF97; border-color: #6FCF97;}
	.enterprise-head .color-3{color:#D25941; border-color: #D25941;}
	.enterprise-head .color-4{color:#7C89FF; border-color:#7C89FF;}
	.btn-group { margin-bottom: 16rpx; font-weight: 500;}
	.btn-group .btn { padding: 32rpx; height: 88rpx; width: 328rpx; color: var(--senderViewColor); background: var(--pureButtonBackOneColor); border: 1rpx solid var(--buttonOutlineOneColor);}
	.btn-group .btn:nth-child(odd) { margin-right: 14rpx; }
	.btn-group .icon { margin-right: 12rpx; width: 48rpx; height: 40rpx; }
	
	.give-card{position: relative;}
	.give-card .bg{width: 630rpx;height: 492rpx;}
	.give-card .tit{position: absolute;top: 140rpx;left: 0;right: 0;padding: 0 30rpx;text-align: center;color: var(--contourButtonTextColor);}
	// .give-card .bg{width: 630rpx;height: 540rpx;}
	// .give-card .tit{position: absolute;top: 140rpx;left: 0;right: 0;padding: 0 30rpx;text-align: center;color: var(--contentBgImageTitleColor);}
	.give-card .btn{ position: absolute; left: 80rpx;bottom: 56rpx; width: 476rpx; height: 76rpx;border-radius: 12rpx;}

	.modal-black /deep/ .u-popup__content{background: none !important;}
	
</style>
